<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
   	<div>
   		<div class="wizard-steps">
			<div class="completed-step"><a href="#"><span>1</span> Applicant Info</a></div>
			<div class="active-step"><a href="#"><span>2</span> Employment Info</a></div>
			<div><a href="#"><span>3</span> Vehicle Info</a></div>
			<div><a href="#"><span>4</span> Financial Info</a></div>
			<div><a href="#"><span>5</span> TradeIn Info</a></div>
			<div><a href="#"><span>6</span> Confirmation</a></div>
		</div>
   		<h:panelGrid rowClasses="s1row" columns="6" columnClasses="rightAlign col-padding, leftAlign col-padding, 
	    	rightAlign col-padding, leftAlign col-padding, rightAlign col-padding, leftAlign col-padding" width="100%">
	    	
	    	<h:outputText value="Employer:" />
	        <h:inputText  value="#{lnCtrl.loanApp.applicants[0].employments[0].employerName}" label="Employer"  />
	        
	        <h:outputText value="Monthly Income:" />
	        <h:inputText   value="#{lnCtrl.loanApp.applicants[0].employments[0].incomeMonthly}"  label="Monthly Income" converter="zeroToBlankConverter"/> 
	        
	        <h:outputText value="Occupation:" />
	        <h:inputText   value="#{lnCtrl.loanApp.applicants[0].employments[0].occupation}"  label="Occupation"   />
	        
	        <h:outputText value="Address1:" />
	        <h:inputText  value="#{lnCtrl.loanApp.applicants[0].employments[0].location.address1}" label="Address1"  />
	        
	        <h:outputText value="Address2:" />
	        <h:inputText   value="#{lnCtrl.loanApp.applicants[0].employments[0].location.address2}"  label="Address2"/> 
	        
	        <h:outputText value="City:" />
	        <h:inputText   value="#{lnCtrl.loanApp.applicants[0].employments[0].location.city}"  label="City"   />
	         
	        <h:outputText value="State:" />
	        <h:selectOneListbox value="#{lnCtrl.loanApp.applicants[0].employments[0].location.state}" label="State" size="1">
	        	<f:selectItems value="#{uiTypes.states}"/>
	        </h:selectOneListbox>
	        
	        <h:outputText value="Country:" />
	        <h:selectOneListbox value="#{lnCtrl.loanApp.applicants[0].employments[0].location.country}"  label="Country" size="1">
	        	<f:selectItems value="#{uiTypes.countries}"/>
	        </h:selectOneListbox>
	        
	        <h:outputText value="ZipCode:" />
	        <h:inputText   value="#{lnCtrl.loanApp.applicants[0].employments[0].location.zip}"  label="Zip Code" /> 
	        
	        <h:outputText value="Employment Tenure:" />
	        <h:panelGroup>
		        <h:selectOneListbox value="#{lnCtrl.loanApp.applicants[0].employments[0].totalYears}"  label="Employment Tenure" size="1">
		        	<f:selectItem itemLabel="Years" itemValue=""/>
		        	<f:selectItem itemLabel="0 Years" itemValue="0"/>
		        	<f:selectItem itemLabel="1 Years" itemValue="1"/>
		        	<f:selectItem itemLabel="2 Years" itemValue="2"/>
		        	<f:selectItem itemLabel="3 Years" itemValue="3"/>
		        	<f:selectItem itemLabel="4 Years" itemValue="4"/>
		        	<f:selectItem itemLabel="5+ Years" itemValue="5"/>
		        </h:selectOneListbox>
		        <h:graphicImage value="/images/spacer.gif" width="5"/>
		        <h:selectOneListbox value="#{lnCtrl.loanApp.applicants[0].employments[0].totalMonths}"  label="Employment Tenure" size="1">
		        	<f:selectItem itemLabel="Months" itemValue=""/>
		        	<f:selectItem itemLabel="0 Months" itemValue="0"/>
		        	<f:selectItem itemLabel="1 Months" itemValue="1"/>
		        	<f:selectItem itemLabel="2 Months" itemValue="2"/>
		        	<f:selectItem itemLabel="3 Months" itemValue="3"/>
		        	<f:selectItem itemLabel="4 Months" itemValue="4"/>
		        	<f:selectItem itemLabel="5 Months" itemValue="5"/>
		        	<f:selectItem itemLabel="6 Months" itemValue="6"/>
		        	<f:selectItem itemLabel="7 Months" itemValue="7"/>
		        	<f:selectItem itemLabel="8 Months" itemValue="8"/>
		        	<f:selectItem itemLabel="9 Months" itemValue="9"/>
		        	<f:selectItem itemLabel="10 Months" itemValue="10"/>
		        	<f:selectItem itemLabel="11 Months" itemValue="11"/>
		        	<f:selectItem itemLabel="12 Months" itemValue="12"/>
		        </h:selectOneListbox>
	        </h:panelGroup>
	        
	        <h:outputText value="" />
	        <h:outputText value="" />
	        
	        <h:outputText value="Work Phone:" />
	        <h:inputText  value="#{lnCtrl.loanApp.applicants[0].employments[0].location.busPhone}" label="Work Phone"  />
	        	         	        
	    </h:panelGrid>
	    <div class="navPanel">
	    	<a4j:commandButton value="&lt;&lt;Previous" styleClass="button1 alignright" immediate="true">
	            <rich:toggleControl targetItem="@prev" event="click" />
	        </a4j:commandButton>
	        <a4j:commandButton styleClass="fright button1" value="Next &gt;&gt;">
	            <rich:toggleControl targetItem="@next" event="click"/>
	        </a4j:commandButton>
	    </div>
	    </div>
</ui:composition>